<template>
  <div class="container">
    <div class="app-container">
      <div class="role-operate">
        <!--   添加角色按钮   -->
        <add-button @click.native="operate('addRoot',0)" />
      </div>
      <my-loading v-if="list.length===0&&!timeout" />
      <el-table
        v-else
        :data="list"
        border
        row-key="id"
        default-expand-all
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column align="center" width="200" label="操作">
          <template v-slot="{ row }">
            <!--     添加       -->
            <el-button
              v-if="row.type===1"
              type="success"
              icon="el-icon-plus"
              circle
              @click="operate('addRoot',row.id)"
            />
            <!--     编辑        -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="operate('editRoot',row.id)"
            />
            <!--     删除        -->
            <!--     删除    -->
            <el-popconfirm
              title="确认删除该行数据吗？"
              style="margin-left: 10px"
              @onConfirm="deletePermission(row.id)"
            >
              <el-button slot="reference" type="danger" icon="el-icon-delete" circle />
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <permission-dialog
      :dialog-visible.sync="dialogVisible"
      :all-permissions="allPermissions"
      :operate-type.sync="operateType"
      :operate-root="operateRoot"
      :title="dialogTitle"
      @updatePage="getPermissionList"
    />
  </div>
</template>
<script>
import AddButton from '@/views/role/components/add-button.vue'
import { deletePermission, getPermissionList } from '@/api/permission'
import { transListToTree } from '@/utils'
import PermissionDialog from '@/views/permission/components/permission-dialog.vue'

export default {
  name: 'Permission',
  components: { PermissionDialog, AddButton },
  data() {
    return {
      allPermissions: [],
      list: [],
      timeout: false,
      dialogVisible: false,
      operateType: '',
      operateRoot: null,
      dialogTitle: ''
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async getPermissionList() {
      this.list = []
      this.allPermissions = []
      this.timeout = false
      setTimeout(() => {
        this.timeout = true
      }, 3 * 1000)
      this.allPermissions = await getPermissionList()
      this.list = transListToTree(this.allPermissions, 0)
      console.log(this.list)
    },
    operate(type, id) {
      this.dialogTitle = type === 'addRoot' ? '添加权限' : '编辑权限'
      this.operateRoot = id
      this.operateType = type
      this.dialogVisible = true
    },
    async deletePermission(id) {
      await deletePermission(id)
      this.$notify({
        title: '删除成功',
        message: '正在刷新页面',
        type: 'success'
      })
      await this.getPermissionList()
    }
  }
}
</script>
<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
</style>
